import React, { Component } from 'react';
// 引入antd-mobile的底部菜单的ui库
import { TabBar } from 'antd-mobile';

// 引入切换显示的组件(容器组件)
import Cookbook from '@/pages/Cookbook'
import Category from '@/pages/Category'
import Cooknews from '@/pages/Cooknews'
import Center from '@/pages/Center'

// 引入图标
import cookbookIcon from '@/assets/icon/cookbook.png'
import cookbookActiveIcon from '@/assets/icon/cookbook-active.png'
import categoryIcon from '@/assets/icon/category.png'
import categoryActiveIcon from '@/assets/icon/category-active.png'
import newsIcon from '@/assets/icon/news.png'
import newsActiveIcon from '@/assets/icon/news-active.png'
import centerIcon from '@/assets/icon/center.png'
import centerActiveIcon from '@/assets/icon/center-active.png'



// 底部菜单
class PageFooter extends Component {
  // 组件内状态
  state = {
    // 指定默认选中的选项
    selectedTab: 'cookbook',
    // 底部菜单是否显示  -- 此项数据日后放到redux中，因为进入详情页面，底部不显示,跨组件通信
    hidden: false,
  }

  render() {
    return (
      <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#2c2c2c"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="菜谱大全"
            key="cookbook"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${cookbookIcon}) center center /  21px 21px no-repeat`
            }} />}
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${cookbookActiveIcon}) center center /  21px 21px no-repeat`
            }} />}
            selected={this.state.selectedTab === 'cookbook'}
            onPress={() => this.setState({ selectedTab: 'cookbook' })}
          >
            <Cookbook />
          </TabBar.Item>
          <TabBar.Item
            title="菜谱分类"
            key="category"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${categoryIcon}) center center /  21px 21px no-repeat`
            }} />}
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${categoryActiveIcon}) center center /  21px 21px no-repeat`
            }} />}
            selected={this.state.selectedTab === 'category'}
            onPress={() => this.setState({ selectedTab: 'category' })}
          >
            <Category></Category>
          </TabBar.Item>
          <TabBar.Item
            title="菜谱资讯"
            key="cooknews"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${newsIcon}) center center /  21px 21px no-repeat`
            }} />}
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${newsActiveIcon}) center center /  21px 21px no-repeat`
            }} />}
            selected={this.state.selectedTab === 'cooknews'}
            onPress={() => this.setState({ selectedTab: 'cooknews' })}
          >
            <Cooknews></Cooknews>
          </TabBar.Item>
          <TabBar.Item
            title="个人中心"
            key="center"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${centerIcon}) center center /  21px 21px no-repeat`
            }} />}
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${centerActiveIcon}) center center /  21px 21px no-repeat`
            }} />}
            selected={this.state.selectedTab === 'center'}
            onPress={() => this.setState({ selectedTab: 'center' })}
          >
            <Center></Center>
          </TabBar.Item>
        </TabBar>
      </div>
    )
  }
}


export default PageFooter;
